<template>
	<!-- 我的地址 -->
	<view id="my_site">
		<!-- 身 -->
		<view class="my_site_main">
			<!-- 循环的地址栏 -->
			<view class="my_site_main_copy" v-for="(item, index) in mySiteList" :key="index">
				<!-- 左边内容 -->
				<view class="main_left clearfix">
					<!-- 名字第一个字 -->
					<view class="left_one_name">{{ oneName[index] }}</view>
					<!-- 名字电话 -->
					<view><text>{{ item.name }}</text>{{ item.phone }}</view>
					<!-- 地址 -->
					<view class="left_site">
						<text :class="{ active: activeDefault === item.id }">{{
	              item.default
	            }}</text>
						<text>{{ item.province }}</text>
						<text>{{ item.city }}</text>
						<text>{{ item.district }}</text>
						<text>{{ item.site }}</text>
					</view>
				</view>
				<!-- 编辑 -->
				<view class="main_edit">编辑</view>
			</view>
		</view>
		<!-- 脚 -->
		<view class="my_site_footer" @click="newSite">
			<view>
				<image src="../../static/images/+@2x.png" />添加新地址</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mySiteList: [{
						id: 0,
						name: '张三',
						phone: 123,
						province: '四川省',
						city: '成都市',
						district: '成华区',
						site: 'xxx大道xxx',
						default: '默认',
					},
					{
						id: 1,
						name: '李三',
						phone: 123,
						province: '四川省',
						city: '成都市',
						district: '武侯区',
						site: 'xxx大道xxx',
						default: '',
					},
					{
						id: 2,
						name: '李三',
						phone: 123,
						province: '四川省',
						city: '成都市',
						district: '武侯区',
						site: 'xxx大道xxx',
						default: '',
					},
					{
						id: 3,
						name: '李三',
						phone: 123,
						province: '四川省',
						city: '成都市',
						district: '武侯区',
						site: 'xxx大道xxx',
						default: '',
					},
					{
						id: 4,
						name: '李三',
						phone: 123,
						province: '四川省',
						city: '成都市',
						district: '武侯区',
						site: 'xxx大道xxx',
						default: '',
					},
					{
						id: 5,
						name: '李三',
						phone: 123,
						province: '四川省',
						city: '成都市',
						district: '武侯区',
						site: 'xxx大道xxx',
						default: '',
					},

					{
						id: 6,
						name: '李三',
						phone: 123,
						province: '四川省',
						city: '成都市',
						district: '武侯区',
						site: 'xxx大道xxx',
						default: '',
					},
					{
						id: 7,
						name: '李三',
						phone: 123,
						province: '四川省',
						city: '成都市',
						district: '武侯区',
						site: 'xxx大道xxx',
						default: '',
					},

					{
						id: 8,
						name: '李三',
						phone: 123,
						province: '四川省',
						city: '成都市',
						district: '武侯区',
						site: 'xxx大道xxx',
						default: '',
					},
					{
						id: 9,
						name: '李三',
						phone: 123,
						province: '四川省',
						city: '成都市',
						district: '武侯区',
						site: 'xxx大道xxx',
						default: '',
					},
				], //地址循环
				oneName: [],
			}
		},
		methods: {
			newSite(){
				uni.navigateTo({
					url:"../newSite/newSite"
				})
			}
		},
		onShow() {
			this.oneName = this.mySiteList.map((item) => {
				return item.name.slice(0, 1);
			});
		}
	}
</script>

<style lang="less" scoped>
	#my_site {
		display: flex;
		flex-direction: column;
		height: 100%;

		// 身
		.my_site_main {
			flex: 1;
			overflow-y: scroll;

			// 循环的地址栏
			.my_site_main_copy {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 0;
				background: #fff;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.16);

				// 左边内容
				.main_left {
					word-break: break-all;
					color: #333;
					font-size: 28rpx;
					padding-right: 20rpx;
					flex: 1;

					// 名字第一个字
					.left_one_name {
						float: left;
						height: 100rpx;
						width: 100rpx;
						background: linear-gradient(135deg,
							rgba(241, 241, 241, 1) 0%,
							rgba(201, 201, 201, 1) 100%);
						border-radius: 50%;
						color: #333;
						font-size: 40rpx;
						text-align: center;
						line-height: 100rpx;
						margin: 0 20rpx;
					}

					text:first-child {
						margin: 0;
					}

					text {
						margin-right: 20rpx;
					}

					// 地址
					.left_site {
						.active {
							display: inline-block;
							border-radius: 10px;
							color: #23b343;
							font-size: 20rpx;
							font-weight: bold;
							background: rgba(35, 179, 67, 0.1);
							padding: 4rpx 12rpx;
							margin-right: 20rpx;
						}
					}
				}

				// 编辑
				.main_edit {
					height: 56rpx;
					width: 88rpx;
					line-height: 56rpx;
					text-align: center;
					border-left: 2rpx solid #999;
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		// 脚
		.my_site_footer {
			padding: 40rpx 20rpx;

			view {
				vertical-align: middle;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #fff;
				background: linear-gradient(135deg,
					rgba(40, 200, 78, 1) 0%,
					rgba(15, 212, 29, 1) 100%);

				image {
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}
			}
		}

		// 清除浮动
		.clearfix::after {
			clear: both;
			content: '';
			display: block;
			width: 0;
			height: 0;
		}
	}
</style>
